import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './editlabel.css'
import { AtInput, AtButton, AtIcon, AtAvatar } from 'taro-ui'
import reactMixin from 'react-mixin';
import myJs from './editlabelJs.Js'
import app from '../../../../main.js'

export default class EditLable extends Component {

  config = {
    navigationBarTitleText: '编辑标签'
  }
  constructor() {
    super(...arguments);
    this.state = this.getData();
  }
  
  componentDidMount () {
      if(this.init) {
          this.init();
      }
  }

  go = (url) => {
    this.navigateTo(url);
  }

  init() {
    this.$router.params.checkedList===undefined
    ? this.state.checkedList=[]
    : this.state.checkedList=JSON.parse(this.$router.params.checkedList);

    this.setState({
      label_id: this.$router.params.id || this.$router.params.label_id,
      label_name: this.$router.params.name || this.$router.params.label_name,
      checkedList:this.state.checkedList,
      minus_icon:true
    },()=>{
      this.allLabelPatients();
    })
  }
  clearText() {
    this.setState({
      label_name: ''
    });
  }
  allLabelPatients() {
    var me = this;
    var data = {};
    var flag = true;
        if(me.beforeAllLabelPatient) {
            flag = me.beforeAllLabelPatient(data);
        }
        if(flag){
            app.get("web/patientlabel/patients", data, function(res) {
              console.log('返回的所有数据');
              console.log('res',res);
              var data = [];
              for(var i = 0; i < res.data.result.list.length; i++) {
                  var m = {
                      id: res.data.result.list[i].id,
                      name: res.data.result.list[i].name,
                      head_image: res.data.result.list[i].head_image,
                      checked:true
                  }
                  data.push(m);
              }
              me.setState({
                label_patients: {items: data}
              },()=>{
                if(me.$router.params.arr!==undefined){
                    for(let obj of JSON.parse(me.$router.params.arr)){
                        me.state.label_patients.items.push(obj);
                    }
                    me.setState({
                      label_patients:me.state.label_patients
                    })
                }
                
                if(me.state.label_name == undefined){
                    me.setState({
                      label_patients:{items:[]}
                    })
                    return;
                }else{
                  if(me.$router.params.item !== undefined){
                     let item = JSON.parse(me.$router.params.item)
                      me.setState({
                        label_patients:{items:item}
                      })
                  }
                }
                console.log(123456,me.$router.params.arr,me.state.label_name)
              });
          });
        } 
      }
    updateLabelPatient() {
      var me = this;
      // console.log('id',me.state.label_id)
      var data = {
        label_name:me.state.label_name,
        id:me.state.label_id
      }
      var flag = true;
      if(me.beforeUpdateLabelPatient) {
          flag = me.beforeUpdateLabelPatient(data);
      }
      if(flag) {
          app.post("web/patientlabel/save", data, function(res) {      
            let back_index = Number(app.back_index)
            console.log(back_index,app.back_index)
            Taro.navigateBack({delta:back_index})
            app.back_index = 1
            // console.log('res',res);
            // me.redirectTo('../labelmanage/labelmanage')
            // if(me.$router.params.label_name && me.$router.params.label_id){
            //   Taro.navigateBack({delta:3})
            // }else{
            //   Taro.navigateBack({delta:1})
            // }
          });
      }
  }
    deleteLabel() {
      var me = this;
      var data = {label_id: me.state.label_id};
      if(data.id==='0'){
        Taro.navigateBack({delta:1})
        return false;
      }
      Taro.showModal({
        title:'提示',
        content:'确定删除‘'+this.state.label_name+'’标签',
      }).then(res=>{
        console.log(res.cancel);
        if(res.confirm){
          app.post("web/patientlabel/delete", data, function(res) {
            console.log(res);
            Taro.navigateBack({delta:1})
          });
        }
      });  
  }

  控制删除图标的出现
    isDisplayDeleteTag(){
      this.setState({
        minus_icon:!this.state.minus_icon
      })
    }
  //删除标签下的患者
    deletePatient(id){
        for(let i=0;i<this.state.label_patients.items.length;i++){
              if(this.state.label_patients.items[i].id==id){
                  this.state.label_patients.items.splice(i,1);
                  this.setState({
                    label_patients:this.state.label_patients
                  })
              }
        }
    }

    

    beforeUpdateLabelPatient(data){
      let ids='';
      data.label_name=this.state.label_name;
      this.state.label_id!=='0'?data.id=this.state.label_id:'';
      console.log('data.label_name',data.label_name);
      if(data.label_name=='' || data.label_name == undefined){
        app.alertTab('标签名不能为空');
        return false;
      }
      // else if(this.state.label_patients.items.length===0){
      //   app.alertTab('标签下面患者不能为空');
      //   return false;
      // }
      for(let obj of this.state.label_patients.items){
        ids+=(obj.id+',');
      }
      data.ids=ids.substr(0,ids.length-1);
      return true;
    }

    beforeAllLabelPatient(data){
      data.label_id=this.state.label_id;
      return true;
    }

    test(){
       let me = this;
       let id = this.$router.params.id || this.$router.params.label_id;
       let status = this.state.label_name === undefined ? '' : this.state.label_name;
       let items = JSON.stringify(this.state.label_patients.items)
       if(me.state.label_patients.items == ''){
         this.navigateTo('../choosepatient/choosepatient'+'?items=0'+'&label_name='+status+'&id='+id)
       }else{
         this.navigateTo('../choosepatient/choosepatient'+'?items='+items+'&label_name='+status+'&id='+id)
       }
    }

    changeValue(value){
      this.setState({
         label_name:value
      })
    }

  render() {
    
    const { label_patients } = this.state;

    return (
      <View className='edit-label'>
        <AtInput
          className='tags t-gray'
          editable={false}
          name='value'
          title='标签名称'
          type='text'
        />
        <View className='tag-input'>
          <AtIcon 
            value='close-circle' 
            className='close-icon' 
            size='20' 
            color='#999999' 
            onClick={this.clearText.bind(this)}
          >
          </AtIcon>
          <AtInput
            className='tags tags-input'
            name='value'
            type='text'
            value={this.state.label_name}
            onChange={this.changeValue.bind(this)}
          />
        </View>
        <AtInput
          className='tags t-gray'
          editable={false}
          name='value'
          title='标签成员'
          type='text'
        />
        <View className='member'>
          {label_patients.items.map((item,index) =>
            <View 
              className='head head-tag'
              key={index}
            > 
              <AtIcon 
                value='subtract-circle' 
                size='20' 
                color='#ff3b30' 
                className='delete-tag'
                onClick={this.deletePatient.bind(this,item.id)}
                style={
                  this.state.minus_icon
                  ? 'display:block'
                  : 'display:none'
                }
                >
              </AtIcon>
              <AtAvatar 
                circle 
                image={item.head_image} 
                className='img'
              >
              </AtAvatar>{item.name}
          </View>
          )}
          <AtIcon 
            onClick={()=>{this.test()}} 
            value='add-circle' 
            size='57' 
            color='#72d021' 
            className='head-tag icon'
          >
          </AtIcon>
        </View>
        <View className='blank-box'></View>
        <View className='at-row btn-box'>
            <View className='at-col at-col-6'>
                <AtButton type='primary' onClick={this.deleteLabel.bind(this)}  full={true} className='cancel-btn'>删除标签</AtButton> 
            </View>
            <View className='at-col at-col-6'>
                <AtButton type='primary' onClick={this.updateLabelPatient.bind(this)} full={true} className='update-btn'>保存标签</AtButton> 
            </View>
        </View>
        {/* <View className=' class_73'>
          <View className=' class_74'>
            <View className=' class_75'>
              <AtButton className=' class_76' onClick={this.deleteLabel.bind(this)}>
                <Text className=' class_77'>删除标签</Text>
              </AtButton>
            </View>
            <View>
              <AtButton className=' class_78' onClick={this.updateLabelPatient.bind(this)}>
                <Text className=' class_79'>保存标签</Text>
              </AtButton>
            </View>
          </View>
        </View> */}
      </View>

    )
  }
}
reactMixin.onClass(EditLable, myJs);
